const body = document.querySelector('body');
const modal = document.querySelector('.modal');
const modalButton = document.querySelector('.modal-button');
const closeButton = document.querySelector('.close-button');
const scrollDown = document.querySelector('.scroll-down');

// 获取向下箭头
const spanEle = document.querySelector('.scroll-down>span')
let isOpened = false;
// 获取注册切换
const registEle = document.querySelector('.modal-left #slideThree')
// 获取登录切换
//const loginChange = document.querySelector('.modal-left .login')
// 获取注册页面
const regisHtml = document.querySelector('.modal-left .Two')
// 获取登录页面
const loginHtml = document.querySelector('.modal-left .One')
// 获取登录按钮
const loginEle = document.querySelector('.modal-left #switching')
// 获取注册按钮
const loginNowEle = document.querySelector('.modal-left #loginNow')
const openModal = () => {
  modal.classList.add('is-open');
  body.style.overflow = 'hidden';
};

const closeModal = () => {
  modal.classList.remove('is-open');
  body.style.overflow = 'initial';
};
// 向下箭头点击事件
spanEle.addEventListener('click', function () {
  var timeOver = setInterval(function () {
    document.documentElement.scrollTop += 10
    if (document.documentElement.scrollTop > 150) {
      openModal()
      clearInterval(timeOver)
    }
  }, 10)
})

window.addEventListener('scroll', () => {
  if (window.scrollY > window.innerHeight / 3 && !isOpened) {
    isOpened = true;
    scrollDown.style.display = 'none';
    openModal();
  }
});
// 划上去出现提示
window.addEventListener('scroll', () => {
  if (window.scrollY < window.innerHeight / 3) {
    isOpened = false;
    scrollDown.style.display = 'flex';
  }
})

modalButton.addEventListener('click', function () {
  openModal()
});
closeButton.addEventListener('click', closeModal);

document.onkeydown = (evt) => {
  evt = evt || window.event;
  evt.keyCode === 27 ? closeModal() : false;
};

// 切换到注册页面
function checkbox_change(){
  var b=document.getElementById("slideThree");
  if(b.checked==true) {
    regisHtml.style.display="none";
    loginHtml.style.display="block";
  }
  else{
    loginHtml.style.display="none";
    regisHtml.style.display="block";

  }
}


// 获取登录的账号密码
const numberEle = document.querySelector('#email')
const passwordEle = document.querySelector('#password')

// 调用登录接口
function onLogin() {
  let xhr = new window.XMLHttpRequest()
  xhr.open('post', `http://api.yuguoxy.com/api/login`)

  // 设置传输的参数类型
  xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')

  xhr.send(`username=${numberEle.value}&password=${passwordEle.value}`)
  console.log(numberEle.value);
  console.log(passwordEle.value);
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        let result = xhr.responseText
        result = JSON.parse(result)
        if (result.resultCode == 1) {
          alert('登录成功')
          let user = result.resultInfo
          localStorage.setItem('USER', JSON.stringify(user))
          toMain(user)
        } else {
          alert("账号密码错误，请重新输入！")
        }
      }
    }
  }
}
// 点击跳转到主界面
function toMain(user) {
  localStorage.setItem('USER', JSON.stringify(user))
  location.href = './index.html'
}

// 绑定事件监听登录
loginEle.addEventListener('click', function (e) {
  e = e || window.event
  let target = e.target || e.srcElement
  e.preventDefault() //阻止表单默认行为
  onLogin()
})
loginNowEle.addEventListener('click', function (e) {
  e = e || window.event
  let target = e.target || e.srcElement
  e.preventDefault() //阻止表单默认行为
  onRegist()
})

// 注册页面实现-
// 先获取到输入框里面的值
let userNameEle = document.querySelector('#userName')
let userNumberEle = document.querySelector('#userNumber')
let userPasswordEle = document.querySelector('#userPassword')
// 获取对应下方的p标签
// 先进行非空验证
var pO = userNameEle.parentNode.previousElementSibling
var pTwo = userNumberEle.parentNode.previousElementSibling
var pThr = userPasswordEle.parentNode.previousElementSibling

function testOne() {
  let rad_name=document.getElementById("rad-name");//获取对应radio
  let pos=document.getElementsByClassName(".pos-reg-ratio-1");
  if (userNameEle.value == '') {
    pO.innerHTML = '请在下方输入你的用户名'
    pO.style.color = '#7d695e'
    rad_name.checked=false;
    return false
  } else {
    pO.innerHTML = ''
    rad_name.checked=true;
    return true
  }
}

function testTwo() {
  if (userNumberEle.value == '') {
    pTwo.innerHTML = '请在下方输入你的登录密码'
    pTwo.style.color = '#7d695e'
    return false
  } else {
    pTwo.innerHTML = ''
    return true
  }
}

function testThr() {
  if (userPasswordEle.value == '') {
    pThr.innerHTML = '请在下方输入你的登录密码'
    pThr.style.color = '#7d695e'
    return false
  } else {
    pThr.innerHTML = ''
    return true
  }
}
// 鼠标焦点进入事件
userNameEle.onblur = function () {
  testOne()
}
userNumberEle.onblur = function () {
  testTwo()
  if (testTwo()) {
    testFour()
  }
}
userPasswordEle.onblur = function () {
  testThr()
  if (testThr()) {
    testFive()
  }
}

// 账号验证
function testFour() {
  let rad_email=document.getElementById("rad-email");//获取对应radio
  let pos=document.getElementsByClassName(".pos-reg-ratio-2");
  console.log(pos[0].style.display);
  var arr = userNumberEle.value
  var reg = /^[0-9]{6,15}$/
  if (reg.test(arr)) {
    pTwo.innerHTML = ''

    console.log(pos);
    pos[0].style.display="block";
    //rad_email.style.display="block";

    rad_email.checked=true;
    return true
  } else {
    pTwo.innerHTML = '账号包含至少6位数字'
    pTwo.style.color = '#7d695e'
    rad_email.checked=false;
    return false
  }
}
// 密码验证
function testFive() {
  let rad_pwd=document.getElementById("rad-pwd");//获取对应radio
  let pos=document.getElementsByClassName(".pos-reg-ratio-3");
  console.log(pos);

  var arr = userPasswordEle.value
  var reg = /^[A-Z].*[0-9]|[0-9].*[A-Za-z]/
  if (reg.test(arr)) {
    pThr.innerHTML = ''
    pos[0].style.display="block";
    rad_pwd.checked=true;
    return true
  } else {
    pThr.innerHTML = '密码必须大写字母，英文和数字'
    pThr.style.color = '#7d695e'
    rad_pwd.checked=false;
    pos[0].style.display="none";
    return false
  }
}

// 调用注册接口
function onRegist() {
  let xhr = new window.XMLHttpRequest
  xhr.open('post', 'http://api.yuguoxy.com/api/sign')
  xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
  xhr.send(`username=${userNameEle.value}&password=${userPasswordEle.value}&headerimg=http://img.mp.sohu.com/upload/20170522/1939690054e446809923c7179f735fe5_th.png`)

  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        let result = xhr.responseText
        result = JSON.parse(result)
        if (result.resultCode == 1) {
          let user = result.resultInfo
          alert('注册成功！')
          regisHtml.style.display = 'none'
          loginHtml.style.display = 'block'
        } else {
          console.log(result.resultCode);
        }
      }
    }
  }


}